<template>
	<view class="content">
		<view class="topChart" hover-class="hoverTapChart">
			<qiun-data-charts type="line" :opts="opts" 
			:chartData="chartData" :animation="animation"
			:ontap="ontap"
			 />
		</view>
		
		<view class="underPart">
			<view class="underLeftPart">
				<view class="machinPart" >
					<view :class="machinControl">
						<!-- 风扇信息 -->
						<text>{{fanState}}</text>
					</view>
					<view :class="machineHistory">
						<!-- 电灯信息 -->
						<text>{{lightState}}</text>
					</view>
				</view>
				<view class="weather">
					<!-- 天气模块 -->
					<text>{{errorData}}</text>
				</view>
			</view>
			<view class="excel" >
				<view style="excelHead">
					<view class="excelHead">
						<text>时间</text>
					</view>
					<view class="excelHead">
						<text>温度</text>
					</view>
				</view>
				<scroll-view class="scrollPart" :scroll-y="scrolly">
					<!-- 需要解决最新数据在下的问题 -->
					<view v-for="(item,index) in tmp">

						<view v-if="index%2" style="default">
							<view class="scrollHistory"><text>{{time[index]}}</text></view>
							<view class="scrollHistory"><text>{{item+'℃'}}</text></view>
						</view>
						<view v-else style="default">
							<view class="scrollHistoryB"><text>{{time[index]}}</text></view>
							<view class="scrollHistoryB"><text>{{item+'℃'}}</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		time
	} from 'echarts';
	export default {
		data() {
			return {
				//错误信息
				errorData: '无异常数据',		
				
				//历史记录滚动区域设置
				scrolly: true,

				//图表设置
				ontap: false,
				animation: false,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false,
						rotateLabel: true,
					},
					yAxis: {
						data: [{
							min: -10,
							max: 60
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				//轮询计时器
				timer: null,

				//温度数据 时间
				tmp: [],
				time: [],
				
				//风扇
				fanState: '',
				machinControl: '',
				//电灯
				lightState: '',
				machineHistory: '',
			}
		},
		methods: {
			tapControl() {
				uni.switchTab({
					url: '/pages/control/control',
				})
			},
		},

		onLoad() {
			let that = this;

			//加载时请求数据避免等待
			uni.request({
				url: 'http://192.168.5.3:9091/api/getTempHudRealTime', //正式地址
				method: 'GET',
				success(res) {
					console.log("data:" + res.data.temp)
					that.tmp = res.data.temp.reverse();
					that.time = res.data.time.reverse();
					console.log("tmp:" + that.tmp);
					
					//首次绘制图表
					let chart = {
						//需要添加根据时间变化的下标
						categories: that.time,
						series: [{
							name: "当前温度(单位:℃)",
							data: that.tmp,
						}]
					};
					that.chartData = JSON.parse(JSON.stringify(chart));
					//异常温度数据判断
					if(res.data.tempCondition == 3){
						uni.showToast({
							title:"数据异常",
							icon:"error",
						})
						uni.setStorage({
							key: 'tempTime',
							data: res.data.time[res.data.time.length - 1],
						});
						uni.setStorage({
							key: 'tempData',
							data: res.data.temp[res.data.temp.length - 1],
						});
						//显示错误信息
						that.errorData =  "出现时间:"+res.data.time[res.data.time.length - 1]+"\n"
										+"异常温度度:"+res.data.temp[res.data.temp.length - 1];
					}else{
						//检查是否有错误信息
						let a = '';//数据
						let b = '';//时间
						uni.getStorage({
							key:'tempTime',
							success: function(res) {
								a = res.data;
							},
						});
						uni.getStorage({
							key:'tempData',
							success: function(res) {
								b = res.data;
							},
						});
						//存在错误信息就显示
						if( a != '' ){
							that.errorData = "出现时间:"+ a +"\n"
										+"异常温度:"+ b;
						}							
					}
				},
				fail() {
					uni.showToast({
						title:"网络连接错误",
						icon:'error',
					})
				}
			});
			//获取设备信息
			uni.request({
				url: 'http://192.168.5.3:9091/api/getDeviceState',
				method: 'GET',
				success(res) {
					console.log(res.data)
					//检查水泵状态
					if (res.data.Fan > 0) {
						that.fanState = "风扇已开启至" + res.data.Pump + "档";
						that.machinControl = 'machinControlOn';
					} else {
						that.fanState = "风扇已关闭";
						that.machinControl = 'machinControlOff'
					}
					//检查自动控制状态
					if (res.data.lightState > 0) {
						that.lightState = "灯光开启";
						that.machineHistory = 'machinControlOn';
					} else {
						that.lightState = "灯光关闭";
						that.machineHistory = 'machinControlOff'
					}
				},
				fail() {
					uni.showToast({
						title: "设备状态请求失败",
						icon: "error"
					});
				}
			});
			//轮询
			that.timer = setInterval(() => {
				uni.request({
					url: 'http://192.168.5.3:9091/api/getTempHudRealTime', //正式地址
					/* url: 'http://127.0.0.1:4523/m1/2888201-0-default/api/getTempHudRealTime', //测试地址 */
					method: 'GET',
					success(res) {
						console.log("data:" + res.data.temp)
						that.tmp = res.data.temp.reverse();
						that.time = res.data.time.reverse();
						console.log("tmp:" + that.tmp);
						
						//首次绘制图表
						let chart = {
							//需要添加根据时间变化的下标
							categories: that.time,
							series: [{
								name: "当前温度(单位:℃)",
								data: that.tmp,
							}]
						};
						that.chartData = JSON.parse(JSON.stringify(chart));
						//异常温度数据判断
						if(res.data.tempCondition == 3){
							uni.showToast({
								title:"数据异常",
								icon:"error",
							})
							uni.setStorage({
								key: 'tempTime',
								data: res.data.time[res.data.time.length - 1],
							});
							uni.setStorage({
								key: 'tempData',
								data: res.data.temp[res.data.temp.length - 1],
							});
							//显示错误信息
							that.errorData =  "出现时间:"+res.data.time[res.data.time.length - 1]+"\n"
											+"异常温度度:"+res.data.temp[res.data.temp.length - 1];
						}else{
							//检查是否有错误信息
							let a = '';//数据
							let b = '';//时间
							uni.getStorage({
								key:'tempTime',
								success: function(res) {
									a = res.data;
								},
							});
							uni.getStorage({
								key:'tempData',
								success: function(res) {
									b = res.data;
								},
							});
							//存在错误信息就显示
							if( a != '' ){
								that.errorData = "出现时间:"+ a +"\n"
											+"异常温度:"+ b;
							}							
						}
					}
				});
				//获取设备信息
				uni.request({
					url: 'http://192.168.5.3:9091/api/getDeviceState',
					method: 'GET',
					success(res) {
						console.log(res.data)
						//检查水泵状态
						if (res.data.Fan > 0) {
							that.fanState = "风扇已开启至" + res.data.Pump + "档";
							that.machinControl = 'machinControlOn';
						} else {
							that.fanState = "风扇已关闭";
							that.machinControl = 'machinControlOff'
						}
						//检查自动控制状态
						if (res.data.Light > 0) {
							that.lightState = "灯光开启";
							that.machineHistory = 'machinControlOn';
						} else {
							that.autoState = "灯光关闭";
							that.machineHistory = 'machinControlOff'
						}
					},
					fail() {
						uni.showToast({
							title: "设备状态请求失败",
							icon: "error"
						});
					}
				});
			}, 10000);
		},

		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
	}
</script>

<style>
	.erroMassage{
		width: 94%;
		margin: 0 2%;
		padding: 1%;
		height: 2em;
		float: left;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #f3a73f;
		background-color: #fdedd9;
		font-size: 1em;
	}
	.content {
		width: 100vw;
		height: 87vh;
	}
	
	.default {
		
	}
	
	.topChart {
		width: 94%;
		margin: 2%;
		padding: 1%;
		height: 50%;
		/* background-color: aquamarine; */
		border-radius: 20px;
		box-shadow: 0 0px 10rpx rgba(0, 0, 0, 0.15);
	}
	
	.hoverTopchart {
		width: 96%;
		margin: 2%;
		/* background-color: aqua; */
	}
	
	.underPart {
		/* background-color: blue; */
		width: 96%;
		height: 50%;
		/*稍后	修改为百分比*/
		margin: 2%;
		float: left;
	}
	
	.underLeftPart {
		width: 48%;
		height: 98%;
		margin: 1%;
		float: inherit;
	}
	
	.weather {
		height: 49%;
		width: 100%;
		float: inherit;
		margin-top: 3%;
		border-radius: 10px;
		box-shadow: 5rpx 2rpx 10rpx rgba(0, 0, 0, 0.45);
		float: left;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #f3a73f;
		background-color: #fdedd9;
		font-size: 1em;
	}
	
	.machinPart {
		width: 100%;
		height: 50%;
		margin: 0px;
		/* background-color: beige; */
		float: inherit;
	}
	
	.machineHistory {
		height: 49%;
		width: 100%;
		margin-top: 2%;
		/* background-color: darkgoldenrod; */
		float: inherit;
		border-radius: 10px;
		box-shadow: 5rpx 0rpx 10rpx rgba(0, 0, 0, 0.45);
	}
	
	.machinControlOff {
		height: 49%;
		width: 100%;
		margin: 1%;
		/* background-color: cornflowerblue; */
		float: inherit;
		border-radius: 10px;
		box-shadow: 5rpx 0rpx 10rpx rgba(0, 0, 0, 0.45);
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #8f939c;
		background-color: #efeef9;
		font-size: 1.0em;
	}
	.machinControlOn {
		height: 49%;
		width: 100%;
		margin: 1%;
		/* background-color: cornflowerblue; */
		float: inherit;
		border-radius: 10px;
		box-shadow: 5rpx 0rpx 10rpx rgba(0, 0, 0, 0.45);
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;
		background-color: #18bc37;
		font-size: 1.4em;
	}
	
	
	.excel {
		/* background-color: cornflowerblue; */
		width: 48%;
		height: 100%;
		margin: 0 1%;
		float: left;
		box-shadow: 0 0px 10rpx rgba(0, 0, 0, 0.15);
		
	}
	
	.scrollPart {
		margin-top: 10%;
		height: 90%;
		width: 100%;
	
	}
	
	.scrollHistory {
		height: 40px;
		width: 50%;
		margin: 0%;
		color: #8f939c;
		font-size: 14px;
		line-height: 40px;
		float: left;
		text-align: center;
		background-color: #c8c9cc;
	}
	.scrollHistoryB {
		height: 40px;
		width: 50%;
		margin: 0%;
		float: left;
		color: #8f939c;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		/* background-color: beige; */
	
	}
	
	.excelHead {
		width: 50%;
		float: left;
		background-color: #e2faef;
		color: #8f939c;
		font-size: 18px;
		height: 45px;
		line-height: 45px;
		display:flex;
		flex-direction:column;
		align-items: center;/* 垂直居中 */
		justify-content: center;/* 水平居中*/
		
	}
</style>